<template>
    <div class="dialog">
        <transition name="fade">
            <div class="dialog-bg" v-show="dialogShow"></div>
        </transition>
        <transition name="fade">
            <div class="popup" v-show="dialogShow">
                <div class="title">{{title}}</div>
                <div class="content">{{content}}</div>
                <div class="btn">
                    <button class="item" @click="onCancel" v-if="cancel" :style="{'color':cancelColor}">
                        <span>{{cancelText}}</span>
                    </button>
                    <button class="item" @click="onEnter" v-if="enter" :style="{'color':enterColor}">
                        <span>{{enterText}}</span>
                    </button>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'V-dialog',
    props: {
        dialogShow: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        content: {
            type: String
        },
        cancel: {
            type: Boolean,
            default: false
        },
        cancelColor: {
            type: String
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        enter: {
            type: Boolean,
            default: true
        },
        enterColor: {
            type: String
        },
        enterText: {
            type: String,
            default: '确认'
        }
    },
    methods: {
        onCancel() {
            this.$emit('clickCancel')
        },
        onEnter() {
            this.$emit('clickEnter')
        }
    }
}
</script>

<style scoped>
.dialog .dialog-bg{
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top:0;
    z-index:2017;
}
.dialog .popup{
    position: fixed;
    z-index: 2018;
    top:45%;
    left:50%;
    width:6.4rem;
    font-size:0.32rem;
    overflow: hidden;
    background:#fff;
    transform: translate3d(-50%,-50%,0);
    transition:0.3s;
    border-radius:0.4rem;
}
.dialog .popup .title{
    padding-top:0.52rem;
    font-weight:500;
    line-height:0.48rem;
    text-align: center;
}
.dialog .popup .content{
    padding-top:0.16rem;
    color:#646566;
    font-size:0.28rem;
    line-height: 0.4rem;
    padding:0.16rem 0.48rem 0.52rem 0.48rem;
    text-align: center;
}
.dialog .popup .btn{
    background:#ebedf0;
    display: flex;
    overflow: hidden;
}
.dialog .popup .btn .cancel{
    color:#333;
}
.dialog .popup .btn .item{
    position: relative;
    margin-top:0.4px;
    margin-right:0.6px;
    flex:1;
    height:0.96rem;
    border:0;
    text-align: center;
    background:#fff;
    font-size:0.32rem;
}
.dialog .popup .btn .item::before{
    content:'';
    width:100%;
    height:100%;
    position: absolute;
    left:50%;
    top:50%;
    background:#000;
    transform:translate(-50%,-50%);
    opacity:0;
}
.dialog .popup .btn .item:active::before{
    opacity:.1;
}
.fade-enter-active, .fade-leave-active {
    transition: opacity .4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

</style>